<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-23 17:01:26
 * @LastEditTime: 2024-07-12 22:52:42
 * @Description: 3.文案与视频
-->
<template>
  <div class="fit overflow-auto">
    <div class="three-area m-b-20 p-20">
      <div class="full-w flex gap-80">
        <div class="col full-w">
          <div class="three-title m-b-8">兜底回复文案</div>
          <el-input
            v-model="survivalData.survival_reply_text"
            type="textarea"
            :rows="2"
            clearable
            placeholder="请输入内容"
          />
          <div class="sub-three-title m-y-8">兜底视频类型</div>
          <div class="m-b-12">
            <el-radio
              v-model="survivalData.generate_switch"
              :label="1"
            >
              一键自动生成
            </el-radio>
            <el-radio
              v-model="survivalData.generate_switch"
              :label="0"
            >
              自主上传视频
            </el-radio>
          </div>
        </div>
        <div class="col-auto column">
          <div class="sub-three-title m-b-8 text-left">
            {{ survivalData.generate_switch ? '兜底视频' : '自主上传兜底视频' }}
          </div>
          <UpVideo
            url=""
            :video-flag="!!survivalData.generate_switch"
            up-text="点击上传视频"
            @getFile="getFile($event, 'survival')"
          />
        </div>
      </div>
      <el-button
        type="primary"
        :loading="survivalLoaidng"
        size="small"
        :title="!survivalData.survival_reply_text ? '请输入兜底回复文案' : ''"
        :disabled="!survivalData.survival_reply_text"
        @click="submitSurvival"
      >
        提交
      </el-button>
    </div>
    <div class="three-area m-b-20 p-20">
      <div class="full-w flex gap-80">
        <div class="col full-w">
          <div class="three-title m-b-8">欢迎文案</div>
          <el-input
            v-model="welcomeData.welcome_text"
            type="textarea"
            :rows="2"
            clearable
            placeholder="请输入内容"
          />
          <div class="sub-three-title m-y-8">欢迎视频类型</div>
          <div class="m-b-12">
            <el-radio
              v-model="welcomeData.generate_switch"
              :label="1"
            >
              一键自动生成
            </el-radio>
            <el-radio
              v-model="welcomeData.generate_switch"
              :label="0"
            >
              自主上传视频
            </el-radio>
          </div>
        </div>
        <div class="col-auto column">
          <div class="sub-three-title m-b-8 text-left">
            {{ welcomeData.generate_switch ? '欢迎视频' : '自主上传欢迎视频' }}
          </div>
          <UpVideo
            url=""
            :video-flag="!!welcomeData.generate_switch"
            up-text="点击上传视频"
            @getFile="getFile($event, 'welcome')"
          />
        </div>
      </div>

      <el-button
        type="primary"
        :loading="welcomeLoaidng"
        size="small"
        :title="!welcomeData.welcome_text ? '请输入欢迎文案' : ''"
        :disabled="!welcomeData.welcome_text"
        @click="submitWelcome"
      >
        提交
      </el-button>
    </div>
    <div class="three-area m-b-20 p-20">
      <div class="flex row wrap full-w">
        <div class="flex-1 flex">
          <div class="col-auto m-r-80">
            <div class="three-title m-b-8">等待文案</div>
            <div class="sub-three-title m-y-8">等待视频类型</div>
            <div class="m-b-12">
              <el-radio
                v-model="waitData.generate_switch"
                :label="1"
              >
                一键自动生成
              </el-radio>
              <el-radio
                v-model="waitData.generate_switch"
                :label="0"
              >
                自主上传视频
              </el-radio>
            </div>
          </div>
          <div class="col column">
            <div class="sub-three-title m-b-8 text-left">
              {{ waitData.generate_switch ? '等待视频' : '自主上传等待视频' }}
            </div>
            <UpVideo
              url=""
              :video-flag="!!waitData.generate_switch"
              up-text="点击上传视频"
              @getFile="getFile($event, 'wait')"
            />
          </div>
        </div>
        <div class="flex-1 line-border p-l-20">
          <div class="full-w flex">
            <div class="m-r-80 col-auto">
              <div class="three-title m-b-8">转场图片</div>
              <div class="sub-three-title m-y-8">转场图片类型</div>
              <div class="m-b-12">
                <el-radio
                  v-model="cutMode"
                  :label="1"
                >
                  一键自动生成
                </el-radio>
                <el-radio
                  v-model="cutMode"
                  :label="0"
                >
                  自主上传转场图片
                </el-radio>
              </div>
            </div>
            <div class="col column">
              <div class="sub-three-title m-b-8 text-left">
                {{ cutMode ? '转场图片' : '自主上传转场图片' }}
              </div>
              <div
                v-if="cutMode === 1"
                class="w-120 h-120"
              >
                <img
                  :src="cutUrl"
                  class="fit"
                />
              </div>
              <UpImgList
                v-else
                class="w-120 h-120"
                :url="waitData.cut_bg_image"
                up-text="点击上传图片"
                img-show
                @deleteImg="setImg('')"
                @getImg="setImg"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="center m-t-20">
        <el-button
          type="primary"
          :loading="waitLoaidng"
          size="small"
          @click="submitWait"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import UpVideo from '@/components/upload/up-video-file2.vue'
import UpImgList from '@/components/upload/up-image-list.vue'
import { survivalModel, welcomeModel, cutModel } from '@/api/model'
export default {
  components: {
    UpVideo,
    UpImgList
  },
  props: {
    modelUniqueid: {
      type: String,
      default: ''
    },
    cutUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      survivalLoaidng: false,
      survivalOk: false,
      welcomeLoaidng: false,
      welcomeOk: false,
      waitLoaidng: false,
      waitOk: false,
      survivalData: {
        survival_reply_text: '',
        generate_switch: 0,
        survival_reply_media_file: ''
      },
      welcomeData: {
        welcome_text: '',
        generate_switch: 0,
        welcome_media_file: ''
      },
      waitData: {
        generate_switch: 0,
        cut_media_file: '',
        cut_bg_image: ''
      },
      cutLoading: false,
      cutMode: 1
    }
  },
  created() {},
  methods: {
    setImg(e) {
      this.waitData.cut_bg_image = e
    },
    getFile(file, type) {
      if (type === 'survival') {
        this.survivalData.survival_reply_media_file = file.raw
      } else if (type === 'welcome') {
        this.welcomeData.welcome_media_file = file.raw
      } else {
        this.waitData.cut_media_file = file.raw
      }
    },

    submitSurvival() {
      if (this.survivalData.generate_switch) {
        this.survivalLoaidng = true
        // eslint-disable-next-line no-unused-vars
        const { survival_reply_media_file, ...rest } = this.survivalData
        survivalModel({
          ...rest,
          model_uniqueid: this.modelUniqueid
        })
          .then((res) => {
            if (res && res.code === 0) {
              this.$message.success('提交成功')
            }
          })
          .catch(() => {
            this.$message.error('提交失败，请重试')
          })
          .finally(() => {
            this.survivalLoaidng = false
          })
      } else {
        if (!this.survivalData.survival_reply_media_file) {
          this.$message.warning('请上传视频')
        } else {
          this.survivalLoaidng = true
          const formData = new FormData()
          formData.append('model_uniqueid', this.modelUniqueid)
          formData.append(
            'survival_reply_text',
            this.survivalData.survival_reply_text
          )
          formData.append('generate_switch', this.survivalData.generate_switch)
          formData.append(
            'survival_reply_media_file',
            this.survivalData.survival_reply_media_file,
            this.survivalData.survival_reply_media_file.name
          )
          survivalModel(formData)
            .then((res) => {
              if (res && res.code === 0) {
                this.$message.success('提交成功')
              }
            })
            .catch(() => {
              this.$message.error('提交失败，请重试')
            })
            .finally(() => {
              this.survivalLoaidng = false
            })
        }
      }
    },
    submitWelcome() {
      if (this.welcomeData.generate_switch) {
        this.welcomeLoaidng = true
        // eslint-disable-next-line no-unused-vars
        const { welcome_media_file, ...rest } = this.welcomeData
        welcomeModel({
          ...rest,
          model_uniqueid: this.modelUniqueid
        })
          .then((res) => {
            if (res && res.code === 0) {
              this.$message.success('提交成功')
            }
          })
          .catch(() => {
            this.$message.error('提交失败，请重试')
          })
          .finally(() => {
            this.welcomeLoaidng = false
          })
      } else {
        if (!this.welcomeData.welcome_media_file) {
          this.$message.warning('请上传视频')
        } else {
          this.welcomeLoaidng = true
          const formData = new FormData()
          formData.append('model_uniqueid', this.modelUniqueid)
          formData.append('welcome_text', this.welcomeData.welcome_text)
          formData.append('generate_switch', this.welcomeData.generate_switch)
          formData.append(
            'welcome_media_file',
            this.welcomeData.welcome_media_file,
            this.welcomeData.welcome_media_file.name
          )
          welcomeModel(formData)
            .then((res) => {
              if (res && res.code === 0) {
                this.$message.success('提交成功')
              }
            })
            .catch(() => {
              this.$message.error('提交失败，请重试')
            })
            .finally(() => {
              this.welcomeLoaidng = false
            })
        }
      }
    },
    submitWait() {
      if (this.waitData.generate_switch) {
        this.waitLoaidng = true
        // eslint-disable-next-line no-unused-vars
        const { cut_media_file, ...rest } = this.waitData
        cutModel({
          ...rest,
          model_uniqueid: this.modelUniqueid
        })
          .then((res) => {
            if (res && res.code === 0) {
              this.$message.success('提交成功')
            }
          })
          .catch(() => {
            this.$message.error('提交失败，请重试')
          })
          .finally(() => {
            this.loading = false
            this.waitLoaidng = false
          })
      } else {
        if (!this.waitData.cut_media_file) {
          this.$message.warning('请上传视频')
        } else {
          this.waitLoaidng = true
          const formData = new FormData()
          formData.append('model_uniqueid', this.modelUniqueid)
          formData.append('generate_switch', this.waitData.generate_switch)
          formData.append(
            'cut_media_file',
            this.waitData.cut_media_file,
            this.waitData.cut_media_file.name
          )
          if (this.waitData.generate_switch === 0) {
            formData.append('cut_bg_image', this.waitData.cut_bg_image)
          }

          cutModel(formData)
            .then((res) => {
              if (res && res.code === 0) {
                this.$message.success('提交成功')
              }
            })
            .catch(() => {
              this.$message.error('提交失败，请重试')
            })
            .finally(() => {
              this.waitLoaidng = false
            })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.three-area {
  width: 100%;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e0e0e0;
  .three-title {
    font-weight: 600;
    font-size: 16px;
    color: #1c1f23;
    line-height: 19px;
  }
  .sub-three-title {
    font-size: 14px;
    color: #1c1f23;
    line-height: 22px;
  }
  .line-border {
    border-left: 1px solid #e0e0e0;
  }
}
</style>
